<template>
	<view class="content">
		<z-paging ref="paging" v-model="formList" @query="get_form_list" :default-page-size="15">
			<template slot="top">
				<view class="bartop"></view>
				<view class="cu-bar">
					<view class="action">
						<text class="cuIcon-back text-gray" @tap="goBack"></text> 返回
					</view>
					<view class="text-lg text-bold">
						货架管理
					</view>
					<view class="action">
						<text class="text-lg margin-right" style="color: #13227a;" @tap="filter">筛选</text>
						<text class="text-lg" style="color: #13227a;" @tap="scanCode">扫一扫</text>
					</view>
				</view>
			</template>

			<view v-if="formList.length>0" class="cu-list menu">
				<view v-for="(item,index) in formList" :key="index" @click="showDetail(item)" class="cu-item"
					:style="item.states=='空位置'?'background:#dedede':'background:#fff' ">
					<view class="item margin-top-sm">
						<text>货架ID：{{item.id}}</text>
						<text>半成品名称：{{item.zzproduct}}</text>
					</view>
					<view class="item margin-bottom-sm">
						<text>货架状态：{{item.states}} </text>
						<text>位置信息：{{item.shelfName}}</text>
					</view>
				</view>
			</view>
		</z-paging>
		<view class="cu-modal" :class="modalName=='Edit'? 'show' : ''">
			<view class="cu-dialog">
				<view class="cu-bar bg-white justify-end">
					<view class="content">添加货物</view>
					<view class="action" @tap="hideModal">
						<text class="cuIcon-close text-red"></text>
					</view>
				</view>
				<view class="cu-form-group">
					<view class="title text-sm">半成品名称</view>
					<song-data-picker style="width: 70%; display: flex; justify-content: flex-end; overflow: auto;"
						:localdata="product.types" popup-title="请选择半成品名称" :openSearch="true" :border="false"
						v-model="product.newindex">
					</song-data-picker>
				</view>
				<view class="cu-bar bg-white justify-end">
					<view class="action">
						<button class="cu-btn line-green text-purple" @tap="hideModal">取消</button>
						<button class="cu-btn bg-purple margin-left" @tap="confirmModal">确定</button>
					</view>
				</view>
			</view>
		</view>
		<view class="cu-modal drawer-modal justify-end" :class="modalName=='DrawerModalR'?'show':''" @tap="hideModal"
			:style="[{top:CustomBar+'px',height:'calc(100vh - ' + CustomBar + 'px)'}]">
			<view class="cu-dialog" @tap.stop="">
				<view class="cu-form-group">
					<view class="title text-sm">半成品名称</view>
					<song-data-picker style="width: 70%; display: flex; justify-content: flex-end; overflow: auto;"
						:localdata="filterProduct.types" popup-title="请选择半成品名称" :openSearch="true" :border="false"
						v-model="filterProduct.newindex">
					</song-data-picker>
				</view>
				<view class="cu-form-group">
					<view class="title">占用状态</view>
					<picker @change="StatesChange" :name="states.key" :value="states.newindex" :range="states.types"
						range-key="name">
						<view v-if="states.newindex == -1" class="picker">
							请选择是否占用
						</view>
						<view v-else class="picker">
							{{ states.types[states.newindex].name}}
						</view>
					</picker>
				</view>

				<view class="cu-bar bg-white justify-around">
					<view class="action">
						<button class="cu-btn line-green text-purple" @tap="resetModal">重置</button>
						<button class="cu-btn bg-purple margin-left" @tap="confirmFilterModal">筛选</button>
					</view>
				</view>
			</view>
		</view>
	</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				// "id": null, // id
				// "class": null, //班次
				// "order_id": null, //订单号
				// "product_id": null, //产品名称
				// "number": null, //机台编号
				// "unit": null, //单位
				// "material_id": null, //用料
				// "colour_id": null, //颜色/色粉
				// "order_number": null, //排产数量
				// "qualified_quantity": null, //生产合格数量
				// "working_hours": null, //实际生产工时
				// "scrapped_part": null, //残品数量
				// "operator": null, //操作工
				// "accumulate_number": null, //合格累计数量
				// "debugging_time": null, //换模调试时间
				// "change_material_time": null, // 换料烘料时间
				// "weight": null, //产品单重
				// "abnormal_time": null, //其他异常事件
				// "remarks": null, //备注
				formList: [],
				modalName: null,
				product: {
					newindex: -1,
					key: 'productId',
					name: '半成品名称',
					types: this.$cache.get("products")
				},
				filterProduct: {
					newindex: -1,
					key: 'productId',
					name: '半成品名称',
					types: this.$cache.get("products")
				},
				states: {
					name: '位置信息',
					newindex: -1,
					key: 'states',
					types: [{
						id: 1,
						name: '占用'
					}, {
						id: 0,
						name: '未占用'
					}]
				},
				codeResult: null
			}
		},
		methods: {

			onShow() {
				if (this.$refs.paging)
					this.$refs.paging.reload()

			},

			goBack() {
				uni.navigateBack({
					delta: 1
				})
			},
			hideModal(e) {
				this.modalName = null
			},
			resetModal() {
				this.states.newindex = -1
				this.filterProduct.newindex = -1
			},
			confirmFilterModal(e) {
				this.$refs.paging.reload()
				this.hideModal()

			},
			StatesChange(e) {
				this.states.newindex = e.detail.value
			},

			get_form_list(pageNo, pageSize) {
				console.log(this.states.newindex)

				let url = this.$httpApi.goods_shelves.screen + "?page=" + pageNo + "&listRows=" + pageSize
				if (this.states.newindex !== -1) {
					url = url + "&state=" + this.states.types[this.states.newindex].id
				}
				if (this.filterProduct.newindex !== -1) {
					url = url + "&zzproductId=" + this.filterProduct.newindex
				}
				console.log(url)
				this.$Request.getPHP(url).then(
					res => {
						if (res.code != 200) {
							uni.showToast({
								title: res.message,
								icon: 'none',
								duration: 2000
							});
						} else {
							console.log(res)
							try {
								uni.hideLoading()
								this.$refs.paging.complete(res.data.data)
							} catch (e) {
								this.$refs.paging.complete([])
								uni.hideLoading()
							}
						}
					})
			},


			showDetail(item) {
				// uni.navigateTo({
				// 	url: '/pages/form_detail/form_detail?id=' + item.id + "&operator=" + item.operatorName +
				// 		"&productName=" + item.productName
				// })
			},

			scanCode() {
				this.codeResult = null
				uni.scanCode({
					onlyFromCamera: true,
					scanType: ['qrCode', 'barCode'],
					success: ({
						result,
						scanType,
						charSet,
						path
					}) => {
						if (!result) {
							uni.showToast({
								title: "未扫到结果",
								icon: 'none',
								mask: true
							})
							return
						}
						this.modalName = "Edit"
						this.codeResult = result
						this.product.newindex = -1
					},
					fail: (error) => {}
				})
			},
			filter() {
				this.modalName = 'DrawerModalR'
			},
			hideModal(e) {
				this.modalName = null
			},
			confirmModal(e) {
				let productId = 0
				let state = 0
				if (this.product.newindex !== -1) {
					productId = this.product.newindex
					state = 1
				}

				let url = this.$httpApi.goods_shelves.edit + "?id=" + this.codeResult + "&zzproductId=" + productId +
					"&state=" + state
				console.log(url)
				this.$Request.postPHP(url).then(res => {
					console.log(res)

					if (res.code == 200) {
						uni.showToast({
							title: "操作成功",
							icon: 'none',
							duration: 2000
						});
						this.hideModal()
						this.$refs.paging.reload()
					} else {
						uni.showToast({
							title: res.msg,
							icon: 'none',
							duration: 2000
						});
					}
				})

			},
		}
	}
</script>

<style>
	.cu-list.menu>.cu-item {
		display: flex;
		align-items: flex-start;
		flex-direction: column;
	}

	.item {
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.cu-modal {
		z-index: 99;
	}
</style>